<!-- 表单配置 -->
<template>
  <div>
    <el-form-item label="显示提交按钮">
      <avue-switch v-model="main.activeOption.submitBtn"/>
    </el-form-item>
    <el-form-item v-if="main.activeOption.submitBtn" label="提交按钮文本">
      <avue-input v-model="main.activeOption.submitText"/>
    </el-form-item>
    <el-form-item v-if="main.activeOption.submitBtn" label="提交按钮图标">
      <avue-input v-model="main.activeOption.submitIcon"/>
    </el-form-item>
    <el-form-item label="显示清空按钮">
      <avue-switch v-model="main.activeOption.clearBtn"/>
    </el-form-item>
    <el-form-item v-if="main.activeOption.clearBtn" label="清空按钮文本">
      <avue-input v-model="main.activeOption.clearText"/>
    </el-form-item>
    <el-form-item v-if="main.activeOption.clearBtn" label="清空按钮图标">
      <avue-input v-model="main.activeOption.clearIcon"/>
    </el-form-item>
    <el-form-item label="字体颜色" >
      <avue-input-color v-model="main.activeOption.color"></avue-input-color>
    </el-form-item>
    <el-form-item label="字体大小">
      <avue-input-number v-model="main.activeOption.fontSize"
                         :max="200"></avue-input-number>
    </el-form-item>
    <el-form-item label="文字粗细">
      <avue-select v-model="main.activeOption.fontWeight"
                   :dic="dicOption.fontWeight">
      </avue-select>
    </el-form-item>
    <el-form-item label-width="0">
      <el-button size="mini" type="primary" class="block" @click="addConfig">新增筛选条件</el-button>
    </el-form-item>
    <el-collapse>
      <el-collapse-item v-for="(v, i) in main.activeOption.formConfig" :key="i" :title="v.name">
        <el-form-item label="字段名称">
          <avue-input v-model="v.name"/>
        </el-form-item>
        <el-form-item label="名称隐藏">
          <avue-switch v-model="v.hideName">
          </avue-switch>
        </el-form-item>
        <el-form-item label="名称宽度">
          <avue-input-number v-model="v.labelWidth"/>
        </el-form-item>
        <el-form-item label="字段Code">
          <avue-input v-model="v.code"/>
        </el-form-item>
        <el-form-item label="字段类型">
          <avue-select v-model="v.type" :dic="typeDicData"/>
        </el-form-item>
        <el-form-item v-if="v.type === 'select'" label="选择框数据">
          <el-button size="mini" class="block" @click="editSelectData(v)">编辑</el-button>
        </el-form-item>
        <el-form-item v-if="v.type === 'datetime'" label="时间格式">
          <avue-select v-model="v.format" :dic="dateDicData"/>
        </el-form-item>
        <el-form-item label="级联">
          <avue-switch v-model="v.cascade">
          </avue-switch>
        </el-form-item>
        <el-form-item v-if="v.cascade" label="级联选择">
          <avue-select v-model="v.cascadeItem" :dic="cascadeItems"/>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button size="mini" type="danger" class="block" @click="delConfig(i)">删除</el-button>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <!--编辑下拉选择框数据的弹窗-->
    <el-dialog append-to-body
               :close-on-click-modal="false"
               :visible.sync="selectConfig.show"
               width="60%">
      <el-form-item label="数据类型">
        <avue-radio class="data-radio__select" v-model="selectConfig.current.dataType" :dic="selectConfig.dicData"/>
      </el-form-item>
      <template v-if="selectConfig.current.dataType === 0" >
        <div class="data-monaco">
          <monaco-editor v-model="selectConfig.temp"/>
          <monaco-editor v-model="selectConfig.tip" disabled/>
        </div>
      </template>
      <template v-else>
        <el-form-item label="接口地址">
          <avue-input v-model="apiConfig.url"></avue-input>
        </el-form-item>
        <el-form-item label="后端代理">
          <avue-switch v-model="apiConfig.proxy">
          </avue-switch>
        </el-form-item>
        <el-form-item label="请求方式">
          <avue-select v-model="apiConfig.dataMethod"
                       :dic="dicOption.dataMethod"></avue-select>
        </el-form-item>
        <el-form-item label="请求头">
          <el-button size="small"
                     type="primary"
                     @click="openCode('dataHeader')">编辑函数</el-button>
        </el-form-item>
        <el-form-item label="请求参数">
          <el-button size="small"
                     type="primary"
                     @click="openCode('dataQuery')">编辑函数</el-button>
        </el-form-item>
        <el-form-item label="返回值处理">
          <el-button size="small"
                     type="primary"
                     @click="openCode('dataFilter')">编辑函数</el-button>
        </el-form-item>
        <el-form-item label="预览">
          <el-button size="small"
                     type="primary"
                     @click="refreshData">刷新数据</el-button>
        </el-form-item>
        <el-form-item label="响应数据预览">
          <monaco-editor v-model="apiConfig.dataRes"
                         disabled
                         height="300"></monaco-editor>
        </el-form-item>
      </template>
      <span slot="footer"
            class="dialog-footer">
      <el-button size="small"
                 @click="selectConfig.show = false">取 消</el-button>
      <el-button type="primary"
                 @click="submit"
                 size="small">确 定</el-button>
    </span>
    </el-dialog>
    <codeedit @submit="codeClose"
              v-if="code.box"
              :type="code.type"
              v-model="code.obj"
              :visible.sync="code.box"></codeedit>
  </div>
</template>

<script>
// components
import MonacoEditor from '@/page/components/editor'
import codeedit from '@/page/group/code';
// utils
import { funEval } from "@/utils/utils";
import {dicOption} from "@/option/config";
import {getUrlParams} from "@/echart/util";
import COMMON from "@/config";
export default {
  inject: ["main"],
  components: {
    MonacoEditor,
    codeedit,
  },
  data () {
    return {
      code:{
        box:false,
        type: '',
        obj: '',
      },
      apiConfig:{},
      dicOption: dicOption,
      // 下拉框类型数据
      typeDicData: [{
        label: '输入框',
        value: 'input'
      }, {
        label: '下拉选择框',
        value: 'select'
      }, {
        label: '时间',
        value: 'datetime'
      }],
      // 日期格式
      dateDicData: [{
        label: 'yyyy-MM-dd',
        value: 'yyyy-MM-dd'
      }, {
        label: 'yyyy-MM-dd HH:mm:ss',
        value: 'yyyy-MM-dd HH:mm:ss'
      }],
      // 下拉选择框编辑配置
      selectConfig: {
        show: false,
        current: {},
        dicData: [{ label: '静态数据', value: 0 }, { label: '动态数据', value: 1 }],
        tip: `/**\n*说明：请严格遵守如下格式\n*/\n
[
   {
     "label": "选项1",
     "value": "值1"
   }
]
        `,
      }
    }
  },
  computed:{
    cascadeItems(){
      let items =[]
      for(const form of this.main.activeOption.formConfig){
        items.push({
          label: form.name,
          value: form.code
        })
      }
      return items
    }
  },
  methods: {
    addConfig() {
      this.main.activeOption.formConfig.push({ name: '参数名称', code:'name', type: 'input', labelWidth: 100})
    },
    delConfig(i) {
      this.$confirm(`是否删除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.main.activeOption.formConfig.splice(i, 1)
      }).catch(() => { })
    },
    editSelectData(v) {
      this.selectConfig.show = true
      this.selectConfig.current = v
      if(v.dataType === 0){
        this.selectConfig.temp = this.selectConfig.current.data
      }else{
        this.apiConfig = this.selectConfig.current
      }
    },
    submit() {
      try {
        if(this.selectConfig.current.dataType ===0){
          this.selectConfig.current.data = funEval(this.selectConfig.temp);
        }else {
          Object.assign(this.selectConfig.current, this.apiConfig);
        }
        this.selectConfig.show = false
      } catch (error) {
        this.$message.error('数据格式有误')
      }
    },
    codeClose (value) {
      this.apiConfig[this.code.type] = funEval(value)
    },
    openCode (type) {
      this.code.type = type;
      this.code.obj = this.selectConfig.current[type]
      this.code.box = true;
    },
    refreshData(){
        // 去执行调用数据的逻辑
      this.getDataFromApi(this.apiConfig)
    },
    getDataFromApi(selectForm){
      const detail = (res) => {
        console.log('data预览',res)
        // 处理返回的数据
        if (typeof selectForm.dataFilter === 'function') {
          this.apiConfig.dataRes = JSON.stringify(selectForm.dataFilter(res.data, res) || {}, null, 4);
        }else{
          this.apiConfig.dataRes =JSON.stringify(res.data || {}, null, 4);
        }
      };
      let result = getUrlParams(selectForm.url);
      let url = result.url
      if (this.validatenull(url)) return
      let dataQuery = typeof (selectForm.dataQuery) === 'function' && selectForm.dataQuery(result) || {};
      let dataHeader = typeof (selectForm.dataHeader) === 'function' && selectForm.dataHeader(result) || {};
      if(selectForm.proxy){
        dataQuery["PROXY_URL"]=url
        url =COMMON.url+COMMON.proxyUrl
      }
      let params = Object.assign(result.params, dataQuery);
      this.$axios({
        method: selectForm.dataMethod || 'GET',
        url: url,
        data: params,
        headers: dataHeader,
        params: params
      }).then(res => {
        detail(res);
      });
    }
  }
}
</script>
<style scoped lang="scss">
.data-radio__select {
  ::v-deep .el-radio {
    width: unset;
  }
}
.data-monaco {
  display: flex;
  .monaco_editor_container {
    flex: 1;
    &:first-child {
      flex: 2;
    }
  }
}
</style>
